<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-relet-container`]">
      <view class="title">
        <uv-icon name="home" :color="theme" size="24"></uv-icon>
        <text class="text">{{ formData.project_name }}-{{ formData.room_name }}</text>
      </view>
      <uv-textarea class="container" v-model="formData.message" placeholder="悄悄对店长说点什么吧~"></uv-textarea>
      <view class="title flex-left">
        <uv-icon name="calendar" :color="theme" size="24"></uv-icon>
        <text class="text">苏享家租客须知</text>
      </view>
      <!-- 步骤 -->
      <view class="step-container">
        <view class="step-item">
          <view class="step-item-num">1</view>
          <view class="step-item-name">提交申请</view>
        </view>
        <view class="step-item">
          <view class="step-item-num">2</view>
          <view class="step-item-name">管家审核</view>
        </view>
        <view class="step-item">
          <view class="step-item-num">3</view>
          <view class="step-item-name">确认合同</view>
        </view>
        <view class="step-item">
          <view class="step-item-num">4</view>
          <view class="step-item-name">缴纳首期</view>
        </view>
      </view>
      <view class="tips">1. 续租条件：申请续租前，请联系管家了解降租价格、租期等信息；</view>
      <view class="tips">2. 费用结转：续租成功后，当前合同的押金将用于抵扣新合同费用。</view>
      <view class="fixed-wrap">
        <view class="fixed-button">
          <uv-button type="primary" text="提交申请" customStyle="margin-top: 10px" @click="submit"></uv-button>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { renewApply } from './api'

export default {
  name: 'relet',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      formData: {
        project_name: '',
        room_name: '',
        begin_date: '',
        contractId: '',
        message: '',
        safeAreaInsets: 0,
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    console.log(this.$Route.query)
    for (let key in this.formData) {
      this.formData[key] = this.$Route.query[key] ? this.$Route.query[key] : this.formData[key]
    }
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    // 提交申请
    async submit() {
      const { begin_date, contractId, message } = this.formData
      const { data, errcode } = await renewApply({ beginDate: begin_date, contractId, message })
      if (errcode === 0) {
        uni.redirectTo({ url: '/pages/subpackage/contract/relet-status' })
        // this.$ROUTE.go('/pages/subpackage/contract/relet-status')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('relet-container')} {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 16px;
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 0;
  }
  .flex-left {
    justify-content: flex-start;
  }
  .text {
    font-size: 28rpx;
    margin-left: 10rpx;
  }
  .container {
    margin: 10px 0px;
  }
  .step-container {
    display: flex;
    margin-top: 20px;
    .step-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .step-item-num {
        border-radius: 50%;
        font-size: 24rpx;
        background: #dcd9dc;
        color: white;
        width: 44rpx;
        height: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          width: 200rpx;
          border-bottom: 1px dotted #dcd9dc;
          height: 1px;
          left: 0;
        }
      }
      &:last-child .step-item-num {
        &::before {
          border: 0;
        }
      }
      .step-item-name {
        font-size: 24rpx;
        color: #a9a7aa;
      }
    }
  }
  .tips {
    margin: 10px 0px;
    font-size: 24rpx;
  }
  .fixed-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(to bottom, white, #f5f5f5);
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    .fixed-button {
      display: flex;
      ::v-deep .uv-button-wrapper {
        flex: 1;
        margin: 0 15px;
      }
    }
  }
}
</style>
